
<template>
	<div>
		<compWrapper title="基本信息" theme="primary">
			<compFormEdit
                :labelWidth="150"
				ref="form"
				class="margin-right-15 margin-top-15"
				:formdata="getBase"
				v-model="formData"
			></compFormEdit>
			<footer class="text-right margin-right-15" v-if="type!=='query'">
				<Button type="primary" @click="submit">保存</Button>
                <Button class="margin-left-10" @click="cancel">返回</Button>
			</footer>
		</compWrapper>
		<Spin size="large" fix :show="loading"></Spin>
	</div>
</template>

<script>
import { HttpUpdateAccountBill, HttpAccountBill } from "@/service/accountbill";
import { HttpCarrierServiceList} from '@/service/api/views'
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			loading: false,
			id: this.$route.query.id,
			type: this.$route.params.type,
			formData: {},
            carrierServiceList:[]
		}
	},
	created() {
        HttpCarrierServiceList().then(res=>{
            this.carrierServiceList = res.data.map(item=>{
                return {
                    value:item.carrierServiceCode,
                    label:item.carrierServiceCode+' ('+item.carrierServiceName+')',
                }
            })
        })
		this.getDetail();
        
	},

	computed: {
		...mapGetters('dictionary', ['getSysAllList']),
		getBase() {
			const isQuery = this.type === 'query',
			    isAdd = this.type === 'add',
				isEdit = this.type === 'edit';
			return [{
				label: 'carrier',
				key: 'carrier',
				tag: "Select",
				query: isQuery || isEdit,
				options: [{
					label: "FedEx",
					value: "FedEx"
				}, {
					label: "UPS",
					value: "UPS"
                }, 
                {
					label: "UPS1",
					value: "UPS1"
                },{
                    label: "UPSCA",
					value: "UPSCA"
                },{
                    label: "Ontrac",
					value: "ontrac"
                }
                ],
                on:{
                    'on-change':(val)=>{
                        if(val == 'FedEx'){
                            this.formData.serviceCode = ''
                        }else{
                            this.formData.serviceCode = 'UPSG'
                        }
                    }
                }
			},{
				label: 'customer',
				key: 'organizationId',
				tag: "Select",
				props: {
					filterable: true
				},
				query: isQuery || isEdit,
				options: this.getSysAllList,
			}, {
				label: 'shipper Code',
				key: 'shipperCode',
				tag: "Input",
                query: isQuery,
				
			},{
                label: 'serviceCode',
                key: 'serviceCodes',
                tag: "Select",
                options: this.carrierServiceList,
                show:isAdd,
                props: {
                    filterable: true,
					multiple: true,
                },
            }, 
            {
                label: 'serviceCode',
                key: 'serviceCode',
                tag: "Select",
                options: this.carrierServiceList,
                show:!isAdd,
                props: {
                    filterable: true
                },
                query: isQuery,
            },
            {
				label: 'accountNumber',
				key: 'accountNumber',
				query: isQuery,
			}, {
				label: 'meterNumber',
				key: 'meterNumber',
                query: isQuery,
                show:this.formData.carrier == 'FedEx'
			}, {
				label: 'accountKey',
				key: 'accountKey',
				query: isQuery,
			}, {
				label: 'password',
				key: 'password',
				query: isQuery,
                show:this.formData.carrier != 'UPSCA'
			}, {
				label: 'BillAcount',
				key: 'thirdPartyAccount',
				query: isQuery,
			}, {
				label: 'hubId',
				key: 'hubId',
                query: isQuery,
                show:this.formData.carrier == 'FedEx'
			}, {
				label: 'accessLicenseNumber',
				key: 'accessLicenseNumber',
                query: isQuery,
                show:this.formData.carrier != 'FedEx' && this.formData.carrier != 'UPSCA'
			}, {
				label: 'billThirdPartyCountry',
				key: 'billThirdPartyCountry',
                query: isQuery,
                show:this.formData.carrier != 'FedEx' && this.formData.carrier != 'UPSCA'
			}, {
				label: 'billThirdPartyPostal',
				key: 'billThirdPartyPostal',
                query: isQuery,
                show:this.formData.carrier != 'FedEx' && this.formData.carrier != 'UPSCA'
            }, 
            ]
		},
	},
	methods: {
		async getDetail() {
			if (this.type === 'add') return;
			this.loading = true;
			HttpAccountBill({ id: this.id }).then(res => {
				this.loading = false;
				this.formData = res.data
			}).catch(err => {
				this.loading = false;
			})
		},
		async submit() {
			const valid = await this.$refs['form'].validate();
			if (!valid) return;
			this.loading = true;
			HttpUpdateAccountBill(this.formData).then(res => {
				this.$router.push({ name: 'accountbill' });
			}).catch(err => {
				this.loading = false;
				this.$Message.error(err.message)
			})
        },
        cancel(){
            this.$router.push({ name: 'accountbill' });
        }
	},

}
</script>

